<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<select id="sheng" name=" ">
					<option value="">请选择省份</option>
				</select>
				<select id="shi" name=" ">
					<option value="">请选择城市</option>
				</select>
				<select id="xian" name=" ">
					<option value="">请选择区县</option>
				</select>
		<script src="citylist.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				//添加省
			var sheng=document.getElementById("sheng");
			var shi=document.getElementById("shi");
			var xian=document.getElementById("xian");
			for (var i = 0; i <citylist.citylist.length; i++) {
				var op=new Option(citylist.citylist[i].p,i);
				sheng.add(op);
			}
			shi.addEventListener("change",function(){
				var xia=citylist.citylist[sheng.value].c[this.value].a;
//				console.log(xian);
				xian.options.length=1;
				for (var i = 0; i < xia.length; i++) {
				var op=new Option(xia[i].s);
				xian.add(op);
				}
			});
			//添加市
			sheng.addEventListener("change",function(){
//				 console.log(citylist.citylist[this.value]);
				 var sq=citylist.citylist[this.value].c;
				 //判断直辖市在市的下拉菜单添加p省
				 if(sq[0].a){
				 	//不是直辖市添加n每个市
				 	shi.options.length=0;
                    shi.add(new Option("请选择城市"));
				 	for (var i = 0; i < sq.length; i++) {
				 		var op=new Option(sq[i].n,i);
				        shi.add(op);
				 	}
				 	
				 }
				 //是直辖市添加p省
				 else{
				 	shi.options.length=0;
				 	var op=new Option(citylist.citylist[this.value].p);
				    shi.add(op);
				 	xian.options.length=1;
				    //添加区 直辖市的区就是n
				    for (var n = 0; n < sq.length; n++) {
				 	var op=new Option(sq[n].n);
				        xian.add(op);
				    }
				 }
//				 console.log(this.selectedIndex);
			});
			};
			
		</script>
	</body>

</html>